<template>
	<div class="detail">
		<el-drawer size="800px" @open="open" :visible.sync="visible" :with-header="false" :before-close="close">
			<div v-loading="loading">
				<div class="header">
					<img :src="info.avatar" style="border-radius: 5px;" width="72px" height="72px" alt="" />
					<div>
						<div style="display: flex;align-items: center;">
							<span v-show="!edit1" class="name">{{ info.name || '--' }}（{{ info.follow_remark || '--' }}）</span>
							<el-input v-show="edit1" size="small" v-model="follow_remark"></el-input>
							<img class="gender" v-if="info.gender == 2" src="../../../assets/images/girl.png" width="15px" alt="" />
							<img class="gender" v-else-if="info.gender == 1" src="../../../assets/images/boy.png" width="15px" alt="" />
							<i
								v-show="!edit1"
								@click="
									() => {
										edit1 = !edit1;
										follow_remark = info.follow_remark;
									}
								"
								class="el-icon-edit"
								style="font-size: 16px;cursor: pointer;"
							></i>
							<i
								v-show="edit1"
								@click="handleCheckInfo('follow_remark', follow_remark)"
								class="el-icon-check right"
								style="font-size: 18px;cursor: pointer;margin-right: 10px;"
							></i>
							<i
								v-show="edit1"
								@click="
									() => {
										edit1 = false;
									}
								"
								class="el-icon-close"
								style="font-size: 18px;cursor: pointer;"
							></i>
						</div>
						<div v-if="info.follow_status == '未跟进'" class="tag c1">{{ info.follow_status }}</div>
						<div v-else-if="info.follow_status == '跟进中'" class="tag c2">{{ info.follow_status }}</div>
						<div v-else-if="info.follow_status == '已拒绝'" class="tag c3">{{ info.follow_status }}</div>
						<div v-else-if="info.follow_status == '已成交'" class="tag c4">{{ info.follow_status }}</div>
					</div>
					<i class="el-icon-close" style="cursor: pointer;" @click="close"></i>
				</div>
				<div class="tags">
					<el-tag size="small" v-for="(item, index) in info.tag_ids" :key="index">{{ item }}</el-tag>
				</div>
				<p class="desc">{{ info.follow_description }}</p>
				<p class="line"></p>
				<div class="content">
					<div class="left-main">
						<p class="info-title">基本信息</p>
						<p>
							<span>手机</span>
							<span>
								<span v-show="!edit2">{{ info.follow_remark_mobiles ? info.follow_remark_mobiles.split(',')[0] : '--' }}</span>
								<i v-show="!edit2" @click="edit2 = !edit2" class="el-icon-edit" style="font-size: 16px;cursor: pointer;"></i>
								<el-input style="width: 120px;" maxlength="11" v-show="edit2" size="small" v-model.number="follow_remark_mobiles"></el-input>
								<i
									v-show="edit2"
									@click="handleCheckInfo('follow_remark_mobiles', follow_remark_mobiles)"
									class="el-icon-check right"
									style="font-size: 18px;cursor: pointer;margin-right: 10px;"
								></i>
								<i
									v-show="edit2"
									@click="
										() => {
											edit2 = false;
										}
									"
									class="el-icon-close"
									style="font-size: 18px;cursor: pointer;"
								></i>
							</span>
							<!-- 	<span class="error">
								请输入正确的手机号
							</span> -->
						</p>
						<p>
							<span>区域</span>
							<span>
								<span v-show="!edit3">{{ portrait.area || '--' }}</span>
								<el-cascader
									style="width: 120px;"
									v-show="edit3"
									size="small"
									v-model="area"
									:options="areaList"
									:props="{ expandTrigger: 'hover', value: 'name', label: 'name' }"
								></el-cascader>
								<i
									v-show="!edit3"
									@click="
										() => {
											edit3 = true;
											area = portrait.area ? portrait.area.split('/') : '';
										}
									"
									class="el-icon-edit"
									style="font-size: 16px;cursor: pointer;"
								></i>
								<i
									v-show="edit3"
									@click="handleCheckInfo('area', area)"
									class="el-icon-check right"
									style="font-size: 18px;cursor: pointer;margin-right: 10px;"
								></i>
								<i
									v-show="edit3"
									@click="
										() => {
											edit3 = false;
										}
									"
									class="el-icon-close"
									style="font-size: 18px;cursor: pointer;"
								></i>
							</span>
						</p>
						<p>
							<span>客户意向</span>
							<span>
								<el-select v-show="edit4" style="width: 120px;" size="small" v-model="intention" placeholder="请选择">
									<el-option v-for="item in intentionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<i
									v-show="edit4"
									@click="handleCheckInfo('intention', intention)"
									class="el-icon-check right"
									style="font-size: 18px;cursor: pointer;margin-right: 10px;"
								></i>
								<i
									v-show="edit4"
									@click="
										() => {
											edit4 = false;
										}
									"
									class="el-icon-close"
									style="font-size: 18px;cursor: pointer;"
								></i>
								<span v-show="!edit4">
									{{ portrait.intention == 1 ? '暂无意向' : portrait.intention == 2 ? '观望中' : portrait.intention == 3 ? '有意向' : '--' }}
								</span>
								<i
									v-show="!edit4"
									@click="
										() => {
											edit4 = true;
											intention = portrait.intention;
										}
									"
									class="el-icon-edit right"
									style="font-size: 16px;cursor: pointer;"
								></i>
							</span>
						</p>
						<p>
							<span>成交次数</span>
							<span>{{ info.deal_num }}</span>
						</p>
						<p>
							<span>所在群</span>
							<template v-if="info.group && info.group.length == 0">
								<span>--</span>
							</template>
							<template v-else>
								<span v-for="(item, index) in info.group">{{ item.name }}</span>
							</template>
						</p>
						<p>
							<span>企业归属成员</span>
							<span v-for="(item, index) in info.follow_info">
								<template v-if="item.follow_name">
									{{ item.follow_name }}--{{ item.follow_section_name }}
									<br />
									({{ item.follow_createtime }})
								</template>
							</span>
						</p>
					</div>
					<div class="line-center"></div>
					<div class="right-main">
						<el-tabs v-model="activeName">
							<el-tab-pane label="跟进记录" name="1">
								<el-form :inline="true" :model="form" ref="follow_type">
									<el-form-item label="跟进状态" prop="follow_type" :rules="[{ required: true, message: '请选择跟进状态', trigger: 'change' }]">
										<el-select size="small" v-model="form.follow_type" placeholder="请选择跟进状态">
											<el-option v-for="(value, key) in statusList" :key="key" :label="value" :value="key"></el-option>
										</el-select>
									</el-form-item>
								</el-form>
								<div class="textarea">
									<el-form :model="form" ref="content">
										<el-form-item prop="content" :rules="[{ required: true, message: '请输入跟进内容', trigger: 'blur' }]">
											<el-input
												style="margin-bottom: 5px;"
												placeholder="请输入跟进内容"
												size="medium"
												resize="none"
												:autosize="{ minRows: 4 }"
												maxlength="1000"
												show-word-limit
												type="textarea"
												v-model="form.content"
											></el-input>
										</el-form-item>
									</el-form>
								</div>
								<div>
									<el-upload
										:key="new Date().getTime()"
										style="width: 100%;"
										ref="followUpload"
										class="followUpload"
										:action="uploadCustomAvatar"
										:data="$uploadParams()"
										name="photo"
										:on-success="handleSuccessImg"
										:on-remove="handleRemoveImg"
										:file-list="ImgList"
										list-type="picture"
										multiple
										:limit="4"
									>
										<el-button size="small" icon="el-icon-plus" slot="trigger" class="btn-white">图片 {{ ImgList.length }}/4</el-button>
										<el-button style="float: right;margin-left: 10px;" size="small" class="btn-blue" @click.stop="handleSubmit">确定</el-button>
										<el-button style="float: right;" size="small" class="btn-white right" @click.stop="handleClear">清空</el-button>
									</el-upload>
								</div>
								<div class="status-wrap">
									<el-timeline>
										<el-timeline-item :timestamp="item.create_at" placement="top" v-for="(item, index) in followList" :key="index">
											<div slot="dot">
												<img v-if="item.follow_type == 2" src="../../../assets/imgs/gjz.png" width="20px" alt="" />
												<img v-else-if="item.follow_type == 3" src="../../../assets/imgs/error.png" width="20px" alt="" />
												<img v-else-if="item.follow_type == 4" src="../../../assets/imgs/suc.png" width="20px" alt="" />
												<img v-else-if="item.follow_type == 1" src="../../../assets/imgs/wgz.png" width="20px" alt="" />
											</div>
											<p class="status-text">
												<span class="name">{{ item.follow_user_name }}</span>
												<span>发表</span>
												<span v-if="item.follow_type == 1" class="status1">【未跟进】</span>
												<span v-else-if="item.follow_type == 2" class="status2">【跟进中】</span>
												<span v-else-if="item.follow_type == 3" class="status3">【已拒绝】</span>
												<span v-else-if="item.follow_type == 4" class="status4">【已成交】</span>
											</p>
											<div class="time-info">
												{{ item.content }}
												<p>
													<el-image
														fit="cover"
														:z-index="9999"
														v-for="(item, index) in item.photo"
														:key="index"
														style="width: 100px; height: 100px;margin: 0 10px 10px 0;"
														:src="item"
														@click.stop="$closeImg"
														:preview-src-list="[item]"
													></el-image>
												</p>
											</div>
										</el-timeline-item>
									</el-timeline>
								</div>
							</el-tab-pane>
							<el-tab-pane label="互动轨迹" name="2" v-loading="loading2">
								<el-timeline>
									<el-timeline-item v-for="(item, index) in trackList" :key="index" :timestamp="item.create_at" placement="top">
										<div slot="dot">
											<img v-if="item.type == 1" src="../../../assets/imgs/follow.png" width="20px" alt="" />
											<img v-else-if="item.type == 2" src="../../../assets/imgs/finish.png" width="20px" alt="" />
											<img v-else-if="item.type == 3" src="../../../assets/imgs/label.png" width="20px" alt="" />
											<img v-else src="../../../assets/imgs/follow.png" width="20px" alt="" />
										</div>
										<p class="time-info">{{ item.content }}</p>
									</el-timeline-item>
								</el-timeline>
							</el-tab-pane>
							<el-tab-pane label="用户画像" name="3">
								<div>
									<el-button v-show="!editPro" @click="handleEditUserInfo" size="small" class="btn-blue">编辑</el-button>
									<el-button v-show="editPro" size="small" style="margin-left: 0;" @click="handleEditPro" class="btn-blue">保存</el-button>
									<el-button v-show="editPro" size="small" @click="editPro = false" class="btn-white">取消</el-button>
								</div>
								<div class="user-info" v-show="!editPro">
									<p>
										<span class="s1">性别</span>
										<span class="s2">{{ portrait.gender == 1 ? '男' : portrait.gender == 2 ? '女' : '--' }}</span>
										<span class="s3">姓名</span>
										<span class="s4">{{ portrait.name || '--' }}</span>
									</p>
									<p>
										<span class="s1">邮箱</span>
										<span class="s2">{{ portrait.email || '--' }}</span>
										<span class="s3">年龄</span>
										<span class="s4">{{ portrait.age || '--' }}</span>
									</p>
									<p>
										<span class="s1">行业</span>
										<span class="s2">{{ portrait.industry || '--' }}</span>
										<span class="s3">生日</span>
										<span class="s4">{{ portrait.birthday || '--' }}</span>
									</p>
									<p>
										<span class="s1">区域</span>
										<span class="s2">{{ portrait.area || '--' }}</span>
										<span class="s3">QQ</span>
										<span class="s4">{{ portrait.qq || '--' }}</span>
									</p>
									<p>
										<span class="s1">微信号</span>
										<span class="s2">{{ portrait.wechat || '--' }}</span>
										<span class="s3">年收入</span>
										<span class="s4">{{ portrait.income || '--' }}</span>
									</p>
									<p>
										<span class="s1">公司</span>
										<span class="s2">{{ portrait.company || '--' }}</span>
										<span class="s3">爱好</span>
										<span class="s4">{{ portrait.hobby || '--' }}</span>
									</p>
									<div style="display: flex;padding-top: 20px;border-top: 1px solid #E5EBFB;">
										<p class="s1" style="margin-right: 20px;">照片</p>
										<el-image
											fit="cover"
											:z-index="9999"
											style="width: 100px; height: 100px"
											v-if="portrait.photo"
											:src="portrait.photo"
											@click.stop="$closeImg"
											:preview-src-list="[portrait.photo]"
										></el-image>
										<span v-else style="margin-left: 167px;">--</span>
									</div>
								</div>
								<div class="user-info" v-show="editPro">
									<p>
										<span class="s1">性别</span>
										<span class="s2">
											<el-radio-group v-model="proInfo.gender">
												<el-radio :label="1">男</el-radio>
												<el-radio :label="2">女</el-radio>
											</el-radio-group>
										</span>
										<span class="s3">姓名</span>
										<span class="s4">
											<el-input
												maxlength="20"
												size="small"
												v-model="proInfo.name"
												@change="
													value => {
														proInfo.name = validateName(value);
													}
												"
											></el-input>
										</span>
									</p>
									<p>
										<span class="s1">邮箱</span>
										<span class="s2">
											<el-input
												maxlength="20"
												size="small"
												v-model="proInfo.email"
												@change="
													value => {
														proInfo.email = validateEmail(value);
													}
												"
											></el-input>
										</span>
										<span class="s3">年龄</span>
										<span class="s4">
											<el-input
												maxlength="3"
												size="small"
												v-model.number="proInfo.age"
												@input="
													value => {
														proInfo.age = $isnumber(value);
													}
												"
											></el-input>
										</span>
									</p>
									<p>
										<span class="s1">行业</span>
										<span class="s2">
											<el-select size="small" v-model="proInfo.industry" placeholder="请选择">
												<el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.name"></el-option>
											</el-select>
										</span>
										<span class="s3">生日</span>
										<span class="s4">
											<el-date-picker size="small" value-format="yyyy-MM-dd" v-model="proInfo.birthday" type="date" placeholder="选择日期"></el-date-picker>
										</span>
									</p>
									<p>
										<span class="s1">区域</span>
										<span class="s2">
											<el-cascader
												size="small"
												v-model="proInfo.area"
												:options="areaList"
												:props="{ expandTrigger: 'hover', value: 'name', label: 'name' }"
											></el-cascader>
										</span>
										<span class="s3">QQ</span>
										<span class="s4">
											<el-input
												maxlength="20"
												size="small"
												v-model.number="proInfo.qq"
												@input="
													value => {
														proInfo.qq = $isnumber(value) == 0 ? '' : $isnumber(value);
													}
												"
											></el-input>
										</span>
									</p>
									<p>
										<span class="s1">微信号</span>
										<span class="s2">
											<el-input
												size="small"
												@input="
													value => {
														proInfo.wechat = value.replace(/\W/g, '');
													}
												"
												v-model="proInfo.wechat"
											></el-input>
										</span>
										<span class="s3">年收入</span>
										<span class="s4">
											<el-input
												size="small"
												maxlength="15"
												v-model.number="proInfo.income"
												@input="
													value => {
														proInfo.income = $isnumber(value);
													}
												"
											></el-input>
										</span>
									</p>
									<p>
										<span class="s1">公司</span>
										<span class="s2"><el-input size="small" maxlength="20" v-model="proInfo.company"></el-input></span>
										<span class="s3">爱好</span>
										<span class="s4"><el-input size="small" maxlength="20" v-model="proInfo.hobby"></el-input></span>
									</p>
									<div style="display: flex;padding-top: 20px;border-top: 1px solid #E5EBFB;">
										<p class="s1" style="margin-right: 20px;">照片</p>
										<el-upload
											v-if="editPro"
											class="avatar-uploader"
											:action="uploadCustomAvatar"
											:data="$uploadParams()"
											name="photo"
											:on-success="handleAvatarSuccess"
											:show-file-list="false"
											:before-upload="beforeAvatarUpload"
										>
											<img v-if="proInfo.photo" :src="proInfo.photo" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import {
	reqGetCustomInfo,
	reqGetCustomPortrait,
	reqEditCustomInfo,
	reqShowEditPortrait,
	uploadCustomAvatar,
	reqAddCustomFollow,
	reqGetCustomFollowList,
	reqGetCustomTrackList
} from '@/api/index';
import { validateEmail, validatePhone, validateName } from '@/util/validate.js';
export default {
	props: {
		row: Object,
		visible: {
			type: Boolean,
			default: false
		},
		status: Object
	},
	data() {
		return {
			activeName: '1',
			form: {
				follow_status: '',
				follow_record: ''
			},
			validateEmail,
			validatePhone,
			validateName,
			info: {},
			follow_remark: '',
			area: '',
			intention: '',
			follow_remark_mobiles: '',
			loading: false,
			portrait: {},
			edit1: false,
			edit2: false,
			edit3: false,
			edit4: false,
			intentionList: [
				{
					value: 1,
					label: '暂无意向'
				},
				{
					value: 2,
					label: '观望中'
				},
				{
					value: 3,
					label: '有意向'
				}
			],
			proInfo: {
				name: '',
				gender: '',
				age: '',
				email: '',
				industry: '',
				birthday: '',
				area: '',
				qq: '',
				hobby: '',
				wechat: '',
				income: '',
				company: '',
				photo: ''
			},
			editPro: false,
			industryList: [],
			uploadCustomAvatar,
			followList: [],
			ImgList: [],
			trackList: [],
			loading2: false
		};
	},
	watch: {
		activeName(val) {
			if (val == 2) {
				this.getTrackList();
			}
		}
	},
	computed: {
		areaList() {
			// 区域
			var arr = [];
			this.$province.forEach(pro => {
				pro.children = [];
				arr.push(pro);
			});
			arr.map(item => {
				this.$city.forEach(city => {
					if (item.ProID == city.ProID) {
						item.children.push(city);
					}
				});
			});
			return arr;
		},
		statusList() {
			var obj = this.status ? JSON.parse(JSON.stringify(this.status)) : {};
			delete obj['1'];
			return obj;
		}
	},
	methods: {
		close() {
			// Object.assign(this.$data, this.$options.data());
			this.handleClear();
			this.$emit('close');
		},
		open() {
			this.getInfo();
		},
		getInfo() {
			this.loading = true;
			Promise.all([
				reqShowEditPortrait({}).then(res => {
					this.industryList = res.data.industry;
				}),
				reqGetCustomInfo({
					id: this.row.id
				}).then(res => {
					this.info = res.data;
					this.getPortrait();
					this.getFollowList();
				})
			])
				.then(res => {
					this.loading = false;
				})
				.catch(error => {
					this.loading = false;
				});
		},
		// 获取用户画像
		getPortrait() {
			reqGetCustomPortrait({
				external_user_id: this.info.external_user_id
			}).then(res => {
				if (!res.data.length && res.data.length != 0) {
					this.portrait = res.data;
				} else {
					this.portrait = {};
				}
				this.loading = false;
			});
		},
		// 获取跟进记录列表
		getFollowList() {
			reqGetCustomFollowList({
				external_user_id: this.info.external_user_id,
				follow_userid: this.info.follow_userid,
				page: 1,
				limit: 1000
			}).then(res => {
				this.followList = res.data;
			});
		},
		// 获取客户互动轨迹
		getTrackList() {
			this.loading2 = true;
			reqGetCustomTrackList({
				external_user_id: this.info.external_user_id,
				page: 1,
				limit: 1000
			})
				.then(res => {
					this.trackList = res.data;
					this.loading2 = false;
				})
				.catch(error => {
					this.loading2 = false;
				});
		},
		handleClear() {
			this.$refs['follow_type'].resetFields();
			this.$refs['content'].resetFields();
			this.$refs.followUpload.clearFiles();
			this.ImgList = [];
		},
		handleSubmit() {
			var flag1 = false;
			var flag2 = false;
			this.$refs['follow_type'].validateField('follow_type', msg => {
				flag1 = !Boolean(msg);
			});
			this.$refs['content'].validateField('content', msg => {
				flag2 = !Boolean(msg);
			});
			if (flag1 && flag2) {
				var photo = [];
				this.ImgList.forEach(item => {
					photo.push(item.url);
				});
				reqAddCustomFollow({
					external_user_id: this.info.external_user_id,
					follow_userid: this.info.follow_userid,
					add_follow_user: localStorage.getItem('user_id'),
					follow_type: this.form.follow_type,
					content: this.form.content,
					photo
				}).then(res => {
					this.handleClear();
					this.getFollowList();
					this.getInfo();
					this.$message.success(res.msg);
				});
			}
		},
		// 修改客户详情
		handleCheckInfo(key, value) {
			this.edit1 = false;
			this.edit2 = false;
			this.edit3 = false;
			this.edit4 = false;
			this.loading = true;
			var params = {
				follow_userid: this.info.follow_userid,
				external_user_id: this.info.external_user_id
			};
			if (key == 'area') {
				params[key] = value.join('/');
			} else {
				params[key] = value;
			}
			reqEditCustomInfo(params)
				.then(res => {
					this.getPortrait();
					this.getInfo();
					this.$message.success(res.msg);
					this.loading = false;
				})
				.catch(error => {
					this.loading = false;
				});
		},
		handleEditPro() {
			this.editPro = false;
			var params = this.proInfo;
			params.area = params.area ? params.area.join('/') : '';
			params.follow_userid = this.info.follow_userid;
			params.external_user_id = this.info.external_user_id;
			reqEditCustomInfo(params).then(res => {
				this.getPortrait(this.info.external_user_id);
				this.$message.success(res.msg);
			});
		},
		handleEditUserInfo() {
			this.editPro = !this.editPro;
			this.proInfo = {
				name: this.portrait.name,
				gender: this.portrait.gender,
				age: this.portrait.age,
				email: this.portrait.email,
				industry: this.portrait.industry,
				birthday: this.portrait.birthday,
				area: this.portrait.area ? this.portrait.area.split('/') : '',
				qq: this.portrait.qq,
				hobby: this.portrait.hobby,
				wechat: this.portrait.wechat,
				income: this.portrait.income,
				company: this.portrait.company,
				photo: this.portrait.photo
			};
		},
		handleAvatarSuccess(res) {
			if (res.code == 200) {
				this.proInfo.photo = res.data;
			}
		},
		beforeAvatarUpload(file) {
			let types = ['image/jpeg', 'image/jpg', 'image/png'];
			const isImage = types.includes(file.type);
			const isLtSize = file.size / 1024 / 1024 < 2;
			if (!isImage) {
				this.$message.error('上传图片只能是JPG、JPEG及PNG格式!');
				return false;
			}
			if (!isLtSize) {
				this.$message.error('上传图片大小不能超过 2MB!');
				return false;
			}
			return isImage && isLtSize;
		},
		// 跟进图片上传完成回调
		handleSuccessImg(res) {
			this.ImgList.push({
				url: res.data
			});
		},
		// 删除跟进图片
		handleRemoveImg(file, fileList) {
			this.ImgList = [];
			fileList.forEach(item => {
				this.ImgList.push({
					url: item.url
				});
			});
		}
	}
};
</script>

<style lang="less" scoped>
.detail {
	.header {
		width: 100%;
		display: flex;
		margin-top: 20px;

		> i {
			font-size: 24px;
			color: #ffbbc0;
			font-weight: bold;
			margin-left: auto;
		}

		> img {
			margin-right: 20px;
		}

		> div {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.tag {
				width: 72px;
				height: 24px;
				border-radius: 4px;
				text-align: center;
				font-size: 14px;
				font-weight: 400;
				color: #fff;
				line-height: 24px;

				&.c1 {
					background-color: #999999;
				}

				&.c2 {
					background-color: #26b8a0;
				}

				&.c3 {
					background-color: #f38b93;
				}

				&.c4 {
					background-color: #6881ec;
				}
			}

			img {
				vertical-align: middle;
			}

			.gender {
				margin: 0 15px 0 10px;
			}

			.name {
				font-size: 20px;
				font-weight: bold;
				color: #333333;
				line-height: 28px;
			}
		}
	}

	.tags {
		margin-top: 15px;

		.el-tag {
			margin: 0 5px 5px 0;
		}
	}

	.desc {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		line-height: 22px;
		margin-top: 15px;
	}

	.line {
		width: 100%;
		height: 1px;
		background: #e5ebfb;
		margin-top: 20px;
	}

	.content {
		width: 100%;
		height: calc(100vh - 180px);
		display: flex;

		.left-main {
			height: calc(100vh - 180px);
			overflow-x: hidden;
			overflow-y: auto;
			width: 220px;
			padding-right: 10px;

			> p {
				margin-top: 15px;
				display: flex;
				flex-direction: column;

				> span {
					display: flex;
					align-items: center;
					justify-content: space-between;

					> span:nth-child(1) {
						max-width: 180px;
					}

					> img {
						cursor: pointer;
					}
				}

				> span + span {
					margin-top: 10px;
				}
			}

			> p + p {
				margin-top: 30px;
			}

			.error {
				font-size: 12px;
				color: #f56c6c;
				margin-top: 5px;
			}
		}

		.line-center {
			width: 1px;
			height: 100%;
			background: #e5ebfb;
			margin: 0 20px;
		}

		.right-main {
			margin-top: 15px;
			width: 490px;

			.el-tab-pane {
				height: calc(100vh - 248px);
				overflow-x: hidden;
				overflow-y: auto;
				padding-right: 10px;
			}

			.textarea {
				margin: 15px 0;
			}

			.btns {
				display: flex;
				align-items: center;
			}

			.followUpload {
				/deep/.el-upload-list {
					display: flex;
					align-items: center;

					.el-upload-list__item {
						width: 102px;
						margin-right: 10px;
					}
				}
			}

			.status-wrap {
				margin-top: 15px;

				.status-text {
					margin-bottom: 10px;

					span {
						font-size: 14px;
						font-weight: 400;
					}

					span + span {
						margin-left: 10px;
					}

					.name {
						color: #6881ec;
					}

					.status1 {
						color: #999999;
					}

					.status2 {
						color: #26b8a0;
					}

					.status3 {
						color: #f38b93;
					}

					.status4 {
						color: #6881ec;
					}
				}
			}

			.el-timeline {
				margin-left: 5px;

				.time-info {
					width: calc(100% - 30px);
					background: #f6f7fb;
					font-size: 14px;
					font-weight: 400;
					color: #333333;
					line-height: 22px;
					padding: 8px 15px;
					border-radius: 5px;
				}
			}

			/deep/.el-timeline-item__dot {
				top: -2px;
				left: -5px;
			}

			.user-info {
				width: 100%;

				> p {
					width: 100%;
					height: 60px;
					display: flex;
					align-items: center;

					.s1 {
						flex: 1;
					}

					.s2 {
						flex: 4;
						text-align: right;
					}

					.s3 {
						flex: 1;
						margin-left: 50px;
					}

					.s4 {
						flex: 4;
						text-align: right;
					}

					/deep/.el-date-editor.el-input {
						width: 100%;
					}
				}

				> p + p {
					border-top: 1px solid #e5ebfb;
				}

				.avatar-uploader {
					border: 1px dashed #e5ebfb;

					.el-upload {
						border: 1px dashed #d9d9d9;
						border-radius: 6px;
						cursor: pointer;
						position: relative;
						overflow: hidden;

						&:hover {
							border-color: #409eff;
						}
					}

					.avatar-uploader-icon {
						font-size: 28px;
						color: #8c939d;
						width: 100px;
						height: 100px;
						line-height: 100px;
						text-align: center;
					}

					.avatar {
						width: 100px;
						height: 100px;
						display: block;
					}
				}
			}
		}
	}
}
</style>
